<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #oCanvas {
            border: 1px solid #000;
        }
    
    </style>
</head>
<body>
    <canvas id="oCanvas" width="500" height="400"></canvas>
    <script type="notjs" id="vertex">
         /*
          顶点着色器 
         */
        attribute vec4 a_position;
        void main() {
            gl_Position =  a_position;
        }
    </script>
    <script type="notjs" id="fragment">
        /*
            片元着色器 ： 绘制颜色或者纹理的 —— 水彩的作用
        */
        precision mediump float;

        void main() {
            gl_FragColor = vec4(0, 0, 0, 1);
        }

    </script>
    <script>
        var canvas = document.getElementById('oCanvas');
        var gl = canvas.getContext('webgl');
        if (!gl) {
            console.log('浏览器不兼容webgl');
        }

        var vertex = document.getElementById('vertex').innerText;
        var fragment = document.getElementById('fragment').innerText;

        // 顶点着色器 gl.VERTEX_SHADER   片元着色器 gl.FRAGMENT_SHADER;
        function createShader(gl, type, source) {
            var shader = gl.createShader(type);
            //  添加数据源
            gl.shaderSource(shader, source); 
            gl.compileShader(shader);

            var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (success) {
                return shader;
            }
            console.log(gl.getShaderInfoLog(shader));
        }

        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertex);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragment);

        function createProgram(gl, vertexShader, fragmentShader) {
            var program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            var success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
                return program;
            }
            console.log(gl.getProgramInfoLog(program));
        }
        var program = createProgram(gl, vertexShader, fragmentShader);
        gl.useProgram(program);

        gl.clearColor(0, 0, 0, 0.5);
        gl.clear(gl.COLOR_BUFFER_BIT);
        // 获取a_position 存储位置
        var a_position = gl.getAttribLocation(program, 'a_position');
     
        var positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
            0.0, 0.0, 0.0, 
            0.5, 0.5, 0.0,
            0.0, 0.5, 0.0,
            0.0, 0.0, 0.0,
            0.5, 0.0, 0.0,
            0.5, 0.5, 0.0,
        ]), gl.STATIC_DRAW);
        
        gl.vertexAttribPointer(a_position, 3, gl.FLOAT, true, 0, 0);
        gl.enableVertexAttribArray(a_position);
        gl.drawArrays(gl.TRIANGLES, 0, 6);

    </script>
</body>
</html>
